<template>
    <!-- 
        {{modelValue}} 
    -->
    <div>{{content}} -- {{content2}}</div>
    
    <!-- <button @click="changeModel">修改v-model的数据</button> -->
    <!-- 
        在vue3中当一个组件没有根节点时 我们可以通过v-bind="$attrs" 将父组件的自定义属性或者事件 
        赋予给指定的dom元素
     -->
    <button v-bind="$attrs" :class="$attrs.class" @click="changeModel">修改v-model的数据</button>
</template>

<script>
export default {
    props: {
        // modelValue: String
        content: String,
        content2: String 
    },
    setup(props, {emit}) {
        // props参数 其实就是 
        // 组件选项中的props 接收这个参数 
        // 提供给我们一个能够操作props中数据的方法
        // props中的数据 可以解构赋值 但是不建议进行解构
        // 因为props中的数据进行解构赋值后会丢失响应式
        // console.log(props)
        // ctx 是一个包含组件上下文的一个对象
        // 对象中有 attrs属性 该属性包含了父组件中给子组件绑定的所有的属性和方法
        // emit的作用就相当于vue中的this.$emit 是一个触发事件的方法当然也可以
        //通过 ctx.emit('update:content', '王者荣耀')更新数据
        // emit的第一个参数是要触发的事件名称 第二个参数是要传递的参数
        // ctx中的方法 也可以进行解构赋值 
        // console.log(ctx) 

        function changeModel() {
            emit('update:content', '王者荣耀')
            emit('update:content2', '英雄联盟')
        }

        return {
            changeModel
        }
    }
}
</script>

<style scoped>
</style>